<template>
  <div>
    <basic-container>
       <el-button type="primary"
                  size="small"
                  plain
                  @click.stop="addModelClick()">添加</el-button>
      <avue-crud :option="tableOption"
                 :data="gridData"
                 :table-loading="tableLoading"
                 :page="page"
                 ref="crud"
                 @current-change="currentPage"
                 @size-change='sizeChange'
                 @selection-change='selectionChange'
                 class="management-vue">

        <template slot-scope="scope"
                  slot="menu">
          <el-button type="primary"
                     size="small"
                     plain
                     @click.stop="updModeBtn(scope.row,scope.index)">修改</el-button>
          <el-button type="primary"
                     size="small"
                     plain
                     @click.stop="tableDelBtn(scope.row,scope.index)">删除</el-button>
         
        </template>
      </avue-crud>
    </basic-container>
    <!-- //新增and 修改 -->
    <el-dialog :title="modelTitle"
               :visible.sync="dialogTypeManageVisible"
               width="500px">
      <el-form ref="addForm"
               :model="addForm"
               :rules="addModelrules"
               label-width="100px"
               size="mini">

          <el-form-item label="规范概要:"
                        prop="speSum">
            <el-input v-model="addForm.speSum"></el-input> 
          </el-form-item>
                    <el-form-item label="协议特征:"
                        prop="protCha">
            <el-input v-model="addForm.protCha"></el-input> 
          </el-form-item>
          <el-form-item label="接入建议:"
                        prop="acSug">
            <el-input v-model="addForm.acSug"></el-input>
          </el-form-item>
          <el-form-item label="阅读说明:"
                        prop="readIns">
            <el-input v-model="addForm.readIns"></el-input>
          </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogTypeManageVisible=false">取消</el-button>
   <el-button type="primary" @click="addSubmit('addForm')">保存</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import 'ele-calendar/dist/vue-calendar.css'
import { option, sbRules } from "@/const-personal/equipment/device/protocol.js"
import {
  getEquipmentDevice,
  delDevice,
  saveDevice
} from "@/api/sysSetup/uesr.js";

export default {
  data () {
    return {
      modelTitle: '',//设备模态标题
      addForm: {
        acSug:'',
        protCha:'',
        speSum:'',
        readIns:'',
        id:''
      },
      addModelrules: sbRules,
      tableOption: option, //表格设置属性
      tablePage: 1,
      tableLoading: false,
      page: {
        total: 0, //总页数
        currentPage: 1, //当前页数
        pageSize: 10,//每页显示多少条
        pageSizes: [5, 10, 20]//
      },
      dialogTypeManageVisible: false,
      gridData:[]
    }
  },
  created () {
    this.getPage()
  },
  methods: {
    getPage(){
      let self = this
      getEquipmentDevice({page:this.page.currentPage,size:this.page.pageSize}).then(res => { //仓库列表
          self.gridData= res.data.data.list
           this.page.total= res.data.data.total
      })
    },
    //添加设备model
    addModelClick () {
      this.dialogTypeManageVisible = true;
      this.modelTitle = '添加协议'
      this.addForm= {
        acSug:'',
        protCha:'',
        speSum:'',
        readIns:'',
        id:''
      }
    },
    //确认添加设备
    addSubmit (formName) {
      this.getSave()
    },
    getSave(){
     this.$refs['addForm'].validate((valid) => {
        if (valid) {
          
           saveDevice(this.addForm).then(res => { //仓库列表
                 if (res.data.code === 200) {
                    this.getPage()
                    this.$notify.success('保存成功');
                    this.dialogTypeManageVisible = false
                  } else {
                    this.$notify.error(res.data.message)
                  }
            })
        } else {
          this.$notify.info('请填写信息')
          return false;
        }
      });
    },
    updModeBtn (row, index) {
      this.dialogTypeManageVisible = true
     this.modelTitle = '修改协议'
       this.addForm = {
        acSug:row.acSug,
        protCha:row.protCha,
        readIns:row.readIns,
        speSum:row.speSum,
        id:row.id
      }
      // this.getSave()
    },
    tableDelBtn (row, index) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        //请求--删除
        delDevice({ id: row.id }).then(res => {
          if (res.data.code === 200) {
            this.getPage()
            this.$notify.success('删除成功');
          } else {
            this.$notify.error(res.data.message)
          }
        })
        // this.$delete(this.gridData, index)

      });
    },
    selectionChange(){

    },
    // 切换页面
    currentPage (val) {
      // console.log(val); 
      this.page.currentPage = val; 
     this.getPage()
    },
    sizeChange (val) {
      // console.log(val);
      this.page.pageSize = val
      this.getPage()
    },
    // 仓库 清空
    qingNull(val) {
      console.log(val)
      this.addForm.options = ''
    },

  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.default-head {
  font-size: 120px;
  border: 1px solid #606266;
  border-radius: 5px;
  padding: 30px 30px;
}
.avue-crud__menu {
  min-height: 0px;
  margin-bottom: 0px;
}
.el-row {
  margin-left: 20px !important;
  margin-bottom: 20px;
  .el-col-3 {
    font-weight: 600;
  }
}
.lineDiv {
  border-top: 1px solid #d6d6d6;
  margin: 0px 1% 20px 25px;
  width: 90%;
}
.el-dialog__body {
  padding-top: 15px;
  padding-bottom: 0px;
}
</style>

<style lang="scss">
.zindex1 > .el-form-item__content {
  z-index: -1;
}
.picture_url {
  min-height: 175px;
}
.picture_urlClass div[class~="el-upload"] {
  display: none;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
thead .el-checkbox__inner {
  display: none !important;
}
</style>

